<template>
	<a-modal :width="550" :mask-closable="false" :visible="visible" :title="currentFolder.type != 3?'上传素材':'添加文案'" @ok="handleOk" @cancel="handleClose" centered>
		<!-- 上传视频 -->
		<template v-if="currentFolder.type == 1">
			<div class="form_title">已选择：0 / 200 上传速度- M/s</div>
			<div class="form_con">
				<a-upload-dragger style="width: 90px;" v-model:fileList="fileList" name="file" :multiple="true"
					action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleUploadChange">
					<div class="upload_con">
						<div class="upload_icon">
							<cloud-upload-outlined />
						</div>
						<div class="upload_text">上传素材</div>
					</div>
				</a-upload-dragger>
			</div>
			<div class="form_desc">支持的视频素材：mov/mp4/3gp（文件≤500M、时长≤900秒、分辨率480p~4k）</div>
			
			<div class="form_title">素材批量处理：</div>
			<div class="form_con">
				<a-input v-model:value="materialForm.video_start" addon-before="修剪开头">
					<template #suffix>
						<div class="operate_con">
							<div class="addon_text">秒</div>
							<minus-outlined @click="operateNumer('start_reduce', 'video_start')" style="margin-left: 20px; cursor: pointer;" />
							<plus-outlined @click="operateNumer('start_add', 'video_start')" style="margin-left: 10px; cursor: pointer;" />
						</div>
					</template>
				</a-input>
			</div>
			<div class="form_con">
				<a-input v-model:value="materialForm.video_end" addon-before="修剪结尾">
					<template #suffix>
						<div class="operate_con">
							<div class="addon_text">秒</div>
							<minus-outlined @click="operateNumer('end_reduce', 'video_end')" style="margin-left: 20px; cursor: pointer;" />
							<plus-outlined @click="operateNumer('end_add', 'video_end')" style="margin-left: 10px; cursor: pointer;" />
						</div>
					</template>
				</a-input>
			</div>
		</template>
		<!-- 上传音频 -->
		<template v-if="currentFolder.type == 2">
			<div class="form_title">已选择：0 / 200 上传速度- M/s</div>
			<div class="form_con">
				<a-upload-dragger style="width: 90px;" v-model:fileList="fileList" name="file" :multiple="true"
					action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleUploadChange">
					<div class="upload_con">
						<div class="upload_icon">
							<cloud-upload-outlined />
						</div>
						<div class="upload_text">上传素材</div>
					</div>
				</a-upload-dragger>
			</div>
			<div class="form_desc">支持的音频格式：mp3/m4a/aac</div>
		</template>
		
		<!-- 上传图片 -->
		<template v-if="currentFolder.type == 4">
			<div class="form_title">已选择：0 / 200 上传速度- M/s</div>
			<div class="form_con">
				<a-upload-dragger style="width: 90px;" v-model:fileList="fileList" name="file" :multiple="true"
					action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleUploadChange">
					<div class="upload_con">
						<div class="upload_icon">
							<cloud-upload-outlined />
						</div>
						<div class="upload_text">上传素材</div>
					</div>
				</a-upload-dragger>
			</div>
			<div class="form_desc">支持的图片格式：jpg/jpeg/png，最小图片尺寸为200*200，单张图片不可大于20M</div>
		</template>
		
		<!-- 添加文案 -->
		<template v-if="currentFolder.type == 3">
			<div class="form_con" style="display: flex; align-items: center; margin-top: 10px;" v-for="(item, index) in textList" :key="index">
				<a-textarea v-model:value="textList[index]" placeholder="请输入" :auto-size="{ minRows: 3, maxRows: 3 }" />
				<div class="right_operate" style="margin-left: 10px; width: 100px;">
					<a-button v-if="index != 0" type="danger" @click="deleteText(index)">删除</a-button>
				</div>
			</div>
			<a-button type="primary" style="margin-top: 10px;" @click="addText">添加</a-button>
		</template>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderAddOutlined,
		CloudUploadOutlined,
		PlusOutlined,
		MinusOutlined
	} from "@ant-design/icons-vue";
	import {message} from "ant-design-vue";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			currentFolder: {
				type: Object,
				default: () => {return {}}
			}
		},

		components: {
			CloudUploadOutlined,
			PlusOutlined,
			MinusOutlined
		},

		setup(props, context) {
			const state = reactive({
				materialForm: {
					video_start: null,
					video_end: null
				},
				textList: [''],
				fileList: []
			});

			const handleOk = () => {
				context.emit('close')
			}

			const handleClose = () => {
				context.emit('close')
			}

			const handleUploadChange = info => {
				const status = info.file.status;
				if (status !== 'uploading') {
					console.log(info.file, info.fileList);
				}
				if (status === 'done') {
					message.success(`${info.file.name} file uploaded successfully.`);
				} else if (status === 'error') {
					message.error(`${info.file.name} file upload failed.`);
				}
			};
			
			const operateNumer = (type, key) => {
				if(type == 'start_reduce'){
					if(state.materialForm[key] && state.materialForm[key]>0){
						state.materialForm[key] = state.materialForm[key] - 1
					}
					if(!state.materialForm[key]){
						state.materialForm[key] = 0
					}
				}
				if(type == 'start_add'){
					if(state.materialForm[key] && state.materialForm[key]>=0){
						state.materialForm[key] = state.materialForm[key] + 1
					}
					if(!state.materialForm[key]){
						state.materialForm[key] = 1
					}
				}
				if(type == 'end_reduce'){
					if(state.materialForm[key] && state.materialForm[key]>0){
						state.materialForm[key] = state.materialForm[key] - 1
					}
					if(!state.materialForm[key]){
						state.materialForm[key] = 0
					}
				}
				if(type == 'end_add'){
					if(state.materialForm[key] && state.materialForm[key]>=0){
						state.materialForm[key] = state.materialForm[key] + 1
					}
					if(!state.materialForm[key]){
						state.materialForm[key] = 1
					}
				}
			}
			
			const deleteText = (index) => {
				state.textList.splice(index, 1)
			}
			
			const addText = () => {
				state.textList.push('')
			}

			watch(() => props.visible, val => {
			})

			return {
				...toRefs(state),
				handleOk,
				handleClose,
				handleUploadChange,
				operateNumer,
				deleteText,
				addText
			}
		},
	});
</script>

<style lang="less" scoped>
	.form_title{
		color: #999;
	}
	.form_con{
		margin-top: 5px;
		.upload_con{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			height: 57px;
			.upload_icon{
				font-size: 20px;
			}
			.upload_text{
				font-size: 12px;
			}
		}
		
		.operate_con{
			display: flex;
			align-items: center;
		}
	}
	.form_desc{
		color: #999;
		margin-top: 5px;
	}
</style>